<template>
	<b-layout-index>
		<navbar bgcolor="#fff" :title="$t('二维码')"></navbar>
		<view class="mg-6 " :style="{ '--colorPrimary': color.primary }">
			<!-- 		<u-row gutter="1">
				<u-col span="6">
					<navigator url="./devise?ptype=2">
						<view class="card  br-rd-6 text-center">
							<view class="pd-top-15">
								<iconfont color="#fff" :size="30" icon="icon-icon-test21" />
							</view>
							<view class="pd-bottom-10">
								<text class="font-size-14"> ئەزا ئەكىرىش </text>
							</view>
						</view>
					</navigator>
				</u-col>

				<u-col span="6">
					<navigator url="./devise?ptype=1">
						<view class="card  br-rd-6 text-center">
							<view class="pd-top-15">
								<iconfont color="#fff" :size="30" icon="icon-qianbao2" />
							</view>
							<view class="pd-bottom-10">
								<text class="font-size-14"> پۇل يۆتكەش كودى </text>
							</view>
						</view>
					</navigator>
				</u-col>

			</u-row> -->

			<swiper class="swiper" next-margin="30px" previous-margin="30px" circular :indicator-dots="indicatorDots"
				:autoplay="autoplay" :interval="interval" :duration="duration" @change="currentChange">
				<swiper-item v-for="(item,index) in datalist">
					<view class="">
						<view class="main-card w95" :class="currentIndex==index?'current-card':'side-card'">
							<image class="bgimg " :class="{'preview':currentIndex==index,'loading':loading}" mode="widthFix"
								:src="item.path?item.path:item.url"></image>
						</view>

					</view>
				</swiper-item>

			</swiper>
			<view class="btns">
				<view class="btn" @click="posterClone">{{$t('海报生成')}}</view>
				<view class="btn" :class="item.path?'active':'disable'" @click="posterSave">{{$t('保存海报')}}</view>
			</view>
			<xlcanvas v-if="showPoster" :param="param" @success="imageSuccess"></xlcanvas>
			<!-- 	<view class="text-center" v-if="posterImage">
				<image @longtap="saveImage" class="posterImage" mode="aspectFit" :src="posterImage"></image>
			</view> -->
		</view>
	</b-layout-index>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'
	import {
		getQrcode
	} from "../../../../api/agent.js"
	import {
		posterByDataMiniTypeList,
		sharePoster,
	} from "@/api/poster.js"
	export default {
		data() {
			return {
				src: "",
				topGrid: [{
					name: "aa"
				}, {
					name: "aa"
				}],
				
				loading:false,
				datalist: [],
				background: ['color1', 'color2', 'color3'],
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				currentIndex: 0,
				item: {},
				showPoster: false,
				posterImage: "",
				param: {
					width: 750, //画布宽度
					height: 1334, //画布高度
					fileType: "jpg", //保存文件类型
					quality: 1 //保存文件质量


				}


			}
		},
		onLoad: function() {
			//	this.getQrcodeData()
			this.getData()
		},
		methods: {
			getQrcodeData: function() {
				var key = "typeimagessss";
				var src = uni.getStorageSync(key);
				if (src) {
					this.src = "data:image/bmp;base64," + src;
				} else {
					getQrcode().then(res => {

						uni.setStorageSync(key, res)
						this.src = "data:image/bmp;base64," + res;
					})
				}
			},
			saveImageToPhotosAlbum() {
				var imgSrc = this.src //base64编码
				var number = Math.random()
				base64ToPath(imgSrc)
					.then(path => {
						console.log(path)
						uni.saveImageToPhotosAlbum({
							filePath: path,
							success: function(res) {
								uni.showToast({
									title: '保存成功',
								})
							},
							fail: function(err) {
								console.log(err)
							}
						})
					})
					.catch(error => {
						console.error(error)
					})
				/* 		uni.saveImageToPhotosAlbum({
							filePath: imgSrc,
							success: function(res) {
								uni.showToast({
									title: '保存成功',
								})
							},
							fail: function(err) {
								console.log(err)
							}
						}) */

			},
			getData: function() {
				posterByDataMiniTypeList(4).then(res => {
					console.log(res)
					this.datalist = res;
					this.item = res[0]
				})
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			}, // 轮播点击
			currentChange(e) {
				let index = e.detail.current;
				this.currentIndex = index;
				this.item = this.datalist[index]
			},
			posterClone(e) {
				uni.showLoading()
				this.loading=true;
				var item = this.item;
				if (!item.path) {
					var the = this;
					the.showPoster = false
					console.log(this.item)
					sharePoster(item.id, 4).then(res => {
						var param = {
							width: 750, //画布宽度
							height: 1334, //画布高度
							fileType: "jpg", //保存文件类型
							quality: 1, //保存文件质量
							...res
						}
						console.log(param)
						the.param = param;
						the.showPoster = true
							the.loading=false;
					})
				} else {
					uni.hideLoading();
						this.loading=false;
					/* uni.saveImageToPhotosAlbum({
						filePath: item.path,
						success: function(res) {
							uni.showToast({
								title: '保存成功',
							})
							the.show = false
						},
						fail: function(err) {
							console.log(err)
						}
					}) */
				}

			},
			posterSave: function() {

				uni.showLoading()
				var item = this.item;
				if (item.path) {
					var the = this;

					uni.hideLoading();
					uni.saveImageToPhotosAlbum({
						filePath: item.path,
						success: function(res) {
							uni.showToast({
								title: '保存成功',
							})
							the.show = false
						},
						fail: function(err) {
							console.log(err)
						}
					})
				}else{
						this.posterClone()
				}
			},
			imageSuccess: function(item) {
				var permessionimg = "permessionimg";
				var res = item.res;
				var the = this;
				console.log(item, res)
				var path = res.tempFilePath;
				the.posterImage = path
				the.showPoster = true
				var index = the.currentIndex;
				var itemO = this.datalist[index]
				itemO['path'] = path;
				this.datalist[index] = itemO;
				uni.hideLoading();
				/* 	pathToBase64(res.tempFilePath).then(brs => {
						console.log(brs)
						the.posterImage = brs
						the.showPoster = true
					}) */
				/* 
								uni.previewImage({
									urls: [path]
								}) */
				/* 	uni.saveImageToPhotosAlbum({
						filePath: path,
						success: function(res) {
							uni.showToast({
								title: '保存成功',
							})
							the.show = false
						},
						fail: function(err) {
							console.log(err)
						}
					}) */

			},

		}

	}
</script>

<style lang="scss">
	.color1 {
		background-color: aqua;
	}

	.color2 {
		background-color: blue;
	}

	.color3 {
		background-color: red;
	}


	.swiper {
		height: 70vh;

		.main-card {

			border-radius: 30rpx;
			background-color: transparent;
			margin: 10px;
			overflow: hidden;

			.bgimg {
				width: 100%;
			}

		}

		.current-card {
			height: 62vh;
			transition: all 0.6s;
		}

		.side-card {
			height: 40vh;
			margin-top: 80rpx;
			filter: blur(2px);
			transition: all 0.6s;
			opacity: 0.2;
		}

	}

	.btns {
		display: grid;
		grid-template-columns: 1fr 1fr;
		padding: 10px;
		gap: 10px;

		.btn {
			padding: 15px;
			background-color: indianred;
			border-radius: 50px;
			text-align: center;
			color: #fff;
			border: 1px indianred solid;

			&.active {

				background-color: var(--color-primary);
				color: #ffffff;
			}

			&.disable {
				border: 1px #fff solid;
				background-color: #ddd;
				color: #607d8b;
			}
		}
	}

	/* 添加动画效果 */
	@keyframes fadeIn1 {
		0% {
			opacity: 0;
		}

		10% {
			opacity: 0.2;
		}

		20% {
			opacity: 0.4;
		}

		30% {
			opacity: 0.6;
		}

		40% {
			opacity: 0.8;
		}

		50% {
			opacity: 1;
		}

		60% {
			opacity: 0.8;
		}

		70% {
			opacity: 0.6;
		}

		80% {
			opacity: 0.4;
		}

		90% {
			opacity: 0.2;
		}

		100% {
			opacity: 0;
		}

	}

	@keyframes fadeIn {
		from {
			opacity: 0.2;
		}

		to {
			opacity: 1;
		}
	}

	.preview {
		animation: fadeIn 1s ease-in-out;
		animation-fill-mode: forwards;
		/* 保持动画结束后的状态 */
	}

	.loading {
		animation: fadeIn1 1s infinite ease-in-out;

		/* 保持动画结束后的状态 */
	}
</style>